<template>
  <div class="fullscreen-container">
    <i-frame :src="dragUrl"  class="iframe-fullscreen"></i-frame>
    <el-button
      class="fullscreen-btn"
      @click="toggleFullScreen"
      type="primary">
      {{ isFullscreen ? '退出全屏' : '进入全屏' }}
    </el-button>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import iFrame from "@/components/iFrame/index";
export default {
  name: "PyJeecgDragView",
  components: { iFrame },
  data() {
    return {
      dragUrl: "",
      isFullscreen: false
    }
  },
  created() {
    let query = this.$route.query;
    // let code = undefined;
    let code = "1121395545261953024";
    let paramsString = "";
    if (query) {
      for (const key in query) {
        if (Object.hasOwnProperty.call(query, key)) {
          const param = query[key];
          if (key == "code") {
            code = param;
          } else {
            if (paramsString != "") {
              paramsString += paramsString + "&" + key + "=" + param;
            } else {
              paramsString = "&" + key + "=" + param;
            }
          }

        }
      }
    }

    if (code) {
      this.dragUrl = process.env.VUE_APP_BASE_API + "/drag/share/view/" + code + "?token=Bearer " + getToken() + paramsString;

    } else {
      this.$modal.msgError("大屏编码(code)为空，无法打开大屏");
    }
  },
  mounted() {
    // 监听全屏状态变化
    this.addFullscreenListener();
  },
  beforeDestroy() {
    // 移除全屏状态监听
    this.removeFullscreenListener();
  },
  methods: {
    toggleFullScreen() {
      if (this.isFullscreen) {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 进入全屏
        const el = document.querySelector('.fullscreen-container');
        if (el && el.requestFullscreen) {
          el.requestFullscreen();
          this.isFullscreen = true;

          // 隐藏导航栏
          this.$store.dispatch("app/toggleSideBarHide", true);
          document.querySelector(".navbar").style.display = "none";
          document.querySelector(".tags-view-container").style.display = "none";
        }
      }
    },

    // 处理全屏状态变化
    handleFullscreenChange() {
      if (!document.fullscreenElement &&
        !document.webkitFullscreenElement &&
        !document.mozFullScreenElement &&
        !document.msFullscreenElement) {
        // 退出全屏状态
        this.isFullscreen = false;
        this.restoreOriginalStyles();
      } else {
        // 进入全屏状态
        this.isFullscreen = true;
      }
    },

    // 恢复原始样式
    restoreOriginalStyles() {
      // 恢复导航栏显示
      this.$store.dispatch("app/toggleSideBarHide", false);
      const navbar = document.querySelector(".navbar");
      const tagsView = document.querySelector(".tags-view-container");

      if (navbar) navbar.style.display = "";
      if (tagsView) tagsView.style.display = "";
    },

    // 添加全屏监听器
    addFullscreenListener() {
      document.addEventListener('fullscreenchange', this.handleFullscreenChange);
      document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
      document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
      document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
    },

    // 移除全屏监听器
    removeFullscreenListener() {
      document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
      document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
      document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
      document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
    }
  }
}
</script>

<style scoped>
.fullscreen-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: auto;
  background: #fff;
}

.iframe-fullscreen {
  width: 100%;
  min-height: 100vh;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
}

.fullscreen-btn {
  position: fixed;
  top: 50px;
  right: 20px;
  z-index: 1000;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.fullscreen-container:hover .fullscreen-btn {
  opacity: 1;
}
</style>

